<template>
  <div class="main-container" v-loading="isLoading">
    <div class="table-container">
      <div class="table-toolbar">
        <div class="table-toolbar-left">
          <el-button type="warning" :icon="CirclePlusFilled" @click="showAddItemDialog = true"
            >新增</el-button
          >
        </div>
        <div class="table-toolbar-right flex-center">
          <el-tooltip effect="dark" content="刷新" placement="top">
            <el-button :icon="Refresh" @click="refresh">刷新项目列表</el-button>
          </el-tooltip>
        </div>
      </div>
      <el-scrollbar style="margin-top: 10px">
        <el-table :data="maintenanceProjectStore.projects" style="width: 100%">
          <el-table-column fixed prop="projectName" label="项目名称" />
          <el-table-column fixed prop="site" label="基地编号" />
          <el-table-column fixed prop="creatorId" label="创建者" />
          <el-table-column prop="creationTime" label="创建时间" />
          <el-table-column prop="lastModifierId" label="编辑者" />
          <el-table-column prop="lastModificationTime" label="编辑时间" />
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <el-dialog
        v-model="showAddItemDialog"
        title="添加新设备配置"
        width="400"
        :close-on-click-modal="false"
        draggable
      >
        <div class="content-container">
          <div style="margin-top: 20px">
            <div style="margin-top: 10px">
              <el-text>设备保养项目名称：</el-text>
              <el-input
                style="margin-top: 4px"
                maxlength="20"
                type="text"
                placeholder="请输入项目名称"
                v-model="projectName"
              ></el-input>
            </div>
            <div style="margin-top: 10px">
              <el-text>基地站点编号</el-text>
              <el-input
                style="margin-top: 4px"
                maxlength="20"
                type="number"
                placeholder="请输入基地站点编号"
                v-model="site"
              ></el-input>
            </div>
            <div style="margin-top: 20px; display: flex; justify-content: center">
              <el-button type="primary" @click="onAddNewProject">注册</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { ShowDeleteMessageBoxAsync } from '@/utils/message-box'
import { useDeviceMaintenanceProjectStore } from '@/stores/device-maintenance/project'
import { CirclePlusFilled } from '@element-plus/icons-vue'
import { Refresh } from '@element-plus/icons-vue'
import { Project } from '@/types/system/device-maintenance/project'

const maintenanceProjectStore = useDeviceMaintenanceProjectStore()
const isLoading = ref(false)
const showAddItemDialog = ref(false)
const projectName = ref('')
const site = ref<number | null>(null)

if (maintenanceProjectStore.isNeedLoadProjects) {
  refresh()
}

// 添加
async function onAddNewProject() {
  if (site.value == null) {
    ElMessage.error('请输入站点！')
  } else if (projectName.value == '' || projectName.value == null || projectName.value.length < 6) {
    ElMessage.error('项目名称长度必须大于6个字符')
  } else {
    const newProject = new Project()
    newProject.projectName = projectName.value
    newProject.site = site.value
    let result = await maintenanceProjectStore.insertProjectAsync(newProject)
    if (result) {
      ElMessage.success('添加新项目成功')
    } else {
      ElMessage.error('添加新项目错误')
    }

    showAddItemDialog.value = false
  }
}

// 刷新
async function refresh() {
  isLoading.value = true
  const result = await maintenanceProjectStore.updateProjectsAsync()
  if (result) {
    ElMessage.success('项目列表已更新')
  } else {
    ElMessage.error('项目列表更新错误')
  }
  isLoading.value = false
}

// 删除
async function deleteRow(index: number) {
  if (!(await ShowDeleteMessageBoxAsync())) {
    return
  }

  isLoading.value = true
  const result = await maintenanceProjectStore.deleteProjectAsync(
    maintenanceProjectStore.projects[index].id
  )

  if (result) {
    ElMessage.success('删除项目成功')
  } else {
    ElMessage.error('删除项目错误')
  }
  isLoading.value = false
}
</script>

<style scoped>
.main-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.table-container {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 30px 30px 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.collapse-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.columns-setting-icon {
  display: block;
  font-size: 18px;
  cursor: pointer;
  color: #676767;
}

.table-header .cell {
  color: #333;
}

.content-container {
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  display: flex;
  align-items: center;
  background-color: #fff;
}
</style>
